<template>
    <scroll class="suggest"
            :data="result"
            :beforeScroll=beforeScroll
            @beforeScroll="listScroll"
            ref="scroll"
    >
        <ul class="suggest-list">
            <li class="suggest-item"
                v-for="(item, index) in result"
                :key="index"
                @click="selectItem(item)"
            >
                <div class="icon">
                    <i class="iconfont icon-search"></i>
                </div>
                <p class="name" v-html="item.textHilight"></p>
            </li>
        </ul>
    </scroll>
</template>

<script type="text/ecmascript-6">
    import Scroll from 'base/scroll/scroll'
    import Load from 'base/load/load'
    import { search } from 'api/search'
    import { ERR_OK } from 'api/config'
    import { MINI_PLAYER_HEIGHT } from 'common/js/config'
    import PlayListMixin from 'common/mixins/play-list'
    import SearchBoxMixin from 'common/mixins/search-box'
    import { getStyle } from 'common/js/dom'

    const PERPAGE = 20

    export default {
        name: 'suggest',
        mixins: [PlayListMixin, SearchBoxMixin],
        data() {
            return {
                page: 1,
                result: [],
                pullup: true,
                hasMore: true,
                isLoadErr: false
            }
        },
        props: {
            query: {
                type: String,
                default: ''
            },
            showSinger: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            _initData() {
                this.$refs.scroll.scrollTo(0, 0)
            },
            // 关键字搜索
            _search() {
                search(this.query, this.page, this.showSinger, PERPAGE).then((res) => {
                    if (res.code === ERR_OK) {
                        this.result = this._genResult(res.data)
                    }
                })
            },
            // 修改数据结构
            _genResult(data) {
                let ret = []
                if (data.zhida && data.zhida.singerid) {
                    ret.push({
                        text: data.zhida.singername,
                        textHilight: `<span class="c_tx_highlight">${data.zhida.singername}</span>`
                    })
                }
                if (data.song) {
                    let list = data.song.list.slice(0, 10)
                    list.forEach((item) => {
                        ret.push(this._makeHilight(item))
                    })
                }
                return ret
            },
            _makeHilight(item) {
                if (item.songname_hilight) {
                    item.textHilight = item.songname_hilight
                } else {
                    item.textHilight = item.songname
                }
                item.text = item.songname

                let singerNameHilight = []
                let singerName = []
                item.singer.forEach((i) => {
                    if (i.name_hilight) {
                        singerNameHilight.push(i.name_hilight)
                    } else {
                        singerNameHilight.push(i.name)
                    }
                    singerName.push(i.name)
                })

                item.text += ` - ${singerName.join('/')}`
                item.textHilight += ` - ${singerNameHilight.join('/')}`
                return item
            },
            selectItem(item) {
                this.$emit('select', item.text)
            },
            // 重设滚动部分底部距离
            handlePlayList(playList) {
                const bottom = playList.length > 0 ? `${MINI_PLAYER_HEIGHT}px` : ''
                const el = this.$refs.scroll.$el
                getStyle(el, 'bottom', bottom)
                this.$refs.scroll.refresh()
            }
        },
        watch: {
            query() {
                this._initData()
                this._search()
            }
        },
        components: {
            Scroll,
            Load
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/variable"
    @import "~common/stylus/mixin"

    .suggest
        height: 100%
        overflow: hidden
        .suggest-list
            padding: 0 20px 15px 20px
            .suggest-item
                padding: 8px 0
                display: flex
                margin-bottom: 25px
                .icon
                    display: block
                    flex: 0 0 30px
                    width: 30px
                    .icon-search
                        font-size: 14px
                        color: $color-text-d
                .name
                    display: block
                    flex: 1
                    line-height: 18px
                    font-size: $font-size-medium
                    color: $color-text
                    no-wrap()
                    overflow: hidden
                .name >>>.c_tx_highlight
                    color: $color-theme
        .no-result-wrapper
            position: absolute
            width: 100%
            top: 40%
            transform: translateY(-50%)
        .load
            padding-top: 10px
        .load >>> .icon
            font-size: 35px
            .img
                width: 35px
                height: 35px
</style>
